import React, {PureComponent} from 'react';
import Node from "./components/Node"
import styled from "styled-components";
import Cell from "./components/Cell"

const Container = styled.div`
width: 100%;
height: 100%;
background:#eeeeee;
display:grid;
grid-template-rows:repeat(5,1fr);
grid-template-columns:repeat(8,1fr);
grid-gap:0;
`


class ConfigPage extends PureComponent {
  constructor(props) {
    super(props);

  }


  componentDidMount() {
    // window.addEventListener("resize", this.getContainerSize)
    // this.getContainerSize()
  }


  componentWillUnmount() {
    // window.removeEventListener("resize", this.getContainerSize)
  }

  render() {
    const {nodes, onChangeWaveId} = this.props

    const cells = []
    for (let i = 0; i < 40; i++) {
      cells.push(child => <Cell key={i} index={i} type={'cell'}>{child}</Cell>)
    }

    return (
      <Container ref={this.container}>
        {
          cells.map((cell, index) => {
            let nodeIndex
            const item = nodes.filter((node, nIndexi) => {
              if (node.x_axis == index) {
                nodeIndex = nIndexi
                return true
              }
            })[0]
            if (item) {
              return (
                <Node
                  collectorUuid={this.props.collectorUuid}
                  id={item.id}
                  key={item.url}
                  text={item.name}
                  left={item.x_axis}
                  top={item.y_axis}
                  index={nodeIndex}
                  type={'node'}
                  url={item.url}
                  uuid={item.uuid}
                  onChangeWaveId={onChangeWaveId}
                />
              )
            } else {
              return cell()
            }
          })
        }
      </Container>
    );
  }
}

ConfigPage.propTypes = {};

export default ConfigPage;
